{% extends 'layout/base.html' %}

{% block right_content %}

{% load static %}
<div class="layui-container" style="margin-top: 20px;">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8 content detail">
      <div class="fly-panel detail-box">
        <h1>{{detail.title}}</h1>
        <div class="fly-detail-info">
          {% if detail.category %}
          <span style="color:gray;">来自《{{detail.category.name}}》</span>
          {% else %}
          <span style="color:gray;">——青年时种下什么,老年时就收获什么</span>
          {% endif %}

          <span class="fly-list-nums">
            <a href="#comment"><i class="iconfont" title="回答">&#xe60c;</i> {{comm_num}}</a>
          </span>
        </div>
        <div class="detail-about">
          <a class="fly-avatar" href="/account/u/{{author.id}}">
            <img src="{{author.avatar}}" alt="{{author.username}}">
          </a>
          <div class="fly-detail-user">
            <a href="/account/u/{{author.id}}" class="fly-link">
              <cite>{{author.username}}</cite>
            </a>
            <span style="color:gray;">{{article_create_time}}</span>
          </div>
          <div class="detail-hits" id="LAY_jieAdmin" data-id="123">
            <span style="padding-right: 10px; color: #FF7200">财富：{{author.jifen}}</span>
            {% if author.id == request.user.id %}
            <span class="layui-btn layui-btn-xs jie-admin" type="edit"><a
                href="/detail/edit?aid={{detail.id}}">编辑此贴</a></span>
            <!-- <span class="layui-btn layui-btn-xs jie-admin" type="edit"><a id='delete' data="{{detail.id}}"
                href="#">删除此贴</a></span> -->
            {% endif %}
          </div>
        </div>

        <div id='article_detail' class="detail-body photos">
          {{detail.content}}
        </div>

      </div>

      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>评论区</legend>
        </fieldset>

        <ul class="jieda" id="jieda">
          {% for m in data %}
          <li data-id="{{m.user.id}}" class="jieda-daan">
            <div class="detail-about detail-about-reply">
              <a class="fly-avatar" href="/account/u/{{m.user.id}}">
                <img src="{{m.user.avatar}}" alt="{{m.user.username}}">
              </a>
              <div class="fly-detail-user">
                <a href="/account/u/{{m.user.id}}" class="fly-link">
                  <cite>{{m.user.username}}</cite>
                </a>
              </div>

              <div class="detail-hits">
                <span>{{m.comm_time}}</span>
              </div>

            </div>
            <div class="detail-body jieda-body photos">
              <p class="reply_content" data-id={{m.index}}>{{m.comm_content}}</p>
            </div>
            <div class="jieda-reply">
              <span class="reply_btn" data-username='{{m.user.username}}' id='{{m.user.id}}' type="reply">
                <i class="iconfont icon-svgmoban53"></i>
                回复
              </span>
            </div>
          </li>
          {% endfor %}

          <!-- <li class="fly-none">消灭零回复</li>  -->
        </ul>
        {% if request.user.is_authenticated %}
        <div class="layui-form layui-form-pane">
          <form method="post">
            {% csrf_token %}
            <div class="layui-form-item layui-form-text">
              <a name="comment"></a>
              <div class="layui-input-block">
                <textarea id="L_content" name="content" lay-verify="required" placeholder="请输入内容" class="layui-textarea"
                  style="height: 150px;"></textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <input id="article_id" type="hidden" name="aid" value="{{detail.id}}">
              <button class="layui-btn" lay-filter="reply" lay-submit>提交回复</button>
            </div>
          </form>
        </div>
        {% else %}
        <div style="margin: 0 auto;text-align: center;padding: 40px 0;border: 1px solid gray;"><a href="/account/login"
            class="layui-btn layui-btn-primary">登陆可评论</a></div>
        {% endif %}
      </div>
    </div>
    {% endblock %}
    {% block left_content %}
    <div class="layui-col-md4">

      <!-- <div class="fly-panel">
        <div class="fly-panel-title">
          文章欣赏
        </div>
        <div class="fly-panel-main">
          <p>雨，出其不意的到来</p>
          <br>
          <p>让所有的行人措手不及</p>
          <br>
          <p>雨滴噼里啪啦的打在窗户的玻璃上，然后又迅速的散开</p>
          <br>
          <p>犹如一个生命，在来不及惋惜的时候就离开</p>
          <br>
          <p>那些还呆在房子外面的人，全都撑起了伞</p>
          <br>
          <p>红的，蓝的，浅紫色的，还有透明的</p>
          <br>
          <p>一个个的在雨里来回的走动</p>
          <br>
          <p>水汽迅速的升腾起来，远景开始变得模糊起来</p>
          <br>
          <p>桌子上的咖啡却给人一种安详感 </p>
          <br>
        </div>
      </div> -->

      {% if detail.category.ad_url %}
      <div class="fly-panel">
        <div class="fly-panel-title">
          推荐购买
        </div>
        <div class="fly-panel-main">
          <a href="{{detail.category.ad_url}}" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01"
            style="background-color: #009688; background-image: linear-gradient(to right,#009688,#5FB878);">{{detail.category.ad_name}}</a>
        </div>
      </div>
      {% endif %}

      <div class="fly-panel" style="padding: 20px 0; text-align: center;">
        <img src="{% static 'index/images/weixin.jpg' %}" style="max-width: 100%;" alt="layui">
        <p style="position: relative; color: #666;">微信扫码关注 ”蔓枝阅读“ 公众号</p>
      </div>

    </div>
  </div>
</div>
{% endblock %}

{% block script %}
<script src="{% static 'index/js/detail.js' %}"></script>
{% endblock%}